<template>
  <div class="image-hover-c">
    <div style="overflow: hidden">
      <img class="img"
           width="419"
           :src="data.imgSrc"/>
    </div>
    <div class="image-hover-div p-10">
      <div class="relative circle">
        <div class="absolute top-1/2 left-2/5 transform-by-translate  text-prRed text-2xl italic font-bold select-none">
          ''
        </div>
      </div>
      <span class="text-20px ali-font font-bold my-6 block">{{ data.title }}</span>
      <span class="serif-sc-font description">
        {{ data.description }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
export interface ImgTab {
  id: number,
  imgSrc: string,
  title: string,
  description: string,
}
defineProps({
  data:{
    type:Object,
    default:{}
  }
})
</script>

<style scoped lang="scss">
.image-hover-div {
  width: 419px;
  height: 260px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 4px 24px 12px rgba(0, 0, 0, 0.03999999910593033);
  mix-blend-mode: normal;
  position: relative;

  .circle {
    width: 65px;
    height: 65px;
    background: rgba(255, 255, 255, 1);
    background-blend-mode: normal;
    box-shadow: 0 4px 24px 6px rgba(0, 0, 0, 0.05999999865889549);
    mix-blend-mode: normal;
    border-radius: 50%;
    position: absolute;
    top: -33px;
  }
}

.img {
  transition: transform .1s ease-in .1s;
}

.description {
  display: block;
  //-webkit-animation: scale-out-ver-top .2s cubic-bezier(.55, .085, .68, .53) both;
  //animation: scale-out-ver-top .2s cubic-bezier(.55, .085, .68, .53) both
}

.image-hover-c:hover .image-hover-div > .description {
  display: block;
  //-webkit-animation: scale-up-ver-top .2s cubic-bezier(.39, .575, .565, 1.000) both;
  //animation: scale-up-ver-top .2s cubic-bezier(.39, .575, .565, 1.000) both
}

.image-hover-c:hover .img {
  transform: translateZ(0) scale(1.1, 1.1);
  opacity: 0.9;
}
</style>
